<!DOCTYPE html>
<html>
<head>
	<title>grid</title>
	<style>
		body {
			margin: 0 auto;
			width: auto;
			height: auto;
			
		}
	
		#container{
			/* width: 100%;
			height: 100%; */
			position: absolute;
    		top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			display: grid;
			grid-template-columns: repeat(12, 8.33333%);
  			grid-template-rows: 30% 30% 40%;
			
			}

			.item {
			font-size: 2em;
			text-align: center;
			border: 1px solid #e5e4e9;
			}

			.item-1 {
			background-color: #ef342a;
			grid-column-start: 1;
			grid-column-end: 12;
			grid-row-start: 1;
			grid-row-end: 3;
			}

			.item-2 {
			background-color: #f68f26;
			grid-column-start: 8;
			grid-column-end: 13;
			grid-row-start: 1;
			grid-row-end: 2;
			}

			.item-3 {
			background-color: #4ba946;
			grid-column-start: 8;
			grid-column-end: 13;
			grid-row-start: 2;
			grid-row-end: 3;
			}

			.item-4 {
			background-color: #0376c2;
			grid-column-start: 1;
  			grid-column-end: 7;
			}

			.item-5 {
			background-color: #c077af;
			grid-column-start: 7;
  			grid-column-end: 13;
			}
	</style>
</head>
<body>

<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
</div>

</body>
</html>